<template>
  <div class="goodsPage">

    <pageLoading v-if="page.loading" :size="600"></pageLoading>

    <div class="goods-main" v-if="!page.loading">

      <div class="goods-main-content">

      <div class="content-main">

            <ul class="clearfix">

                <li class="content-main-item" v-for="item in list.items" :key="item.id" :class="{active:item.id === list.selectId}" @click="selectItem(item.id)">

                    <div class="item-pic">
                        <img :src="item.img" alt="">
                    </div>

                    <div class="item-price">
                       ￥{{item.baseprice}}
                    </div>

                    <div class="item-title">
                      {{item.samplename}}
                    </div>

                    <div class="item-note">
                      文字:{{item.cixiuwenziprice}} | logo:{{item.cixiulogoprice}}
                    </div>

                    <div class="item-explain">

                        <ul>
                          <li class="item-explain-row">
                            <span class="item-explain-title">
                               logo刺绣:
                            </span>
                            <span class="item-explain-note">
                                {{item.extra.logocixiu.item}}
                            </span>
                          </li>
                          <li class="item-explain-row">
                            <span class="item-explain-title">
                               用料面料:
                            </span>
                            <span class="item-explain-note">
                                <template v-for="ml in item.extra.mianliao.item">
                                  {{ml}}
                                </template>
                            </span>
                          </li>
                          <li class="item-explain-row">
                            <span class="item-explain-title">
                               版型样式:
                            </span>
                            <span class="item-explain-note">
                                <template v-for="ml in item.extra.sharpInfo.item">
                                  {{ml}}
                                </template>
                            </span>
                          </li>
                          <li class="item-explain-row">
                            <span class="item-explain-title">
                               文字刺绣:
                            </span>
                            <span class="item-explain-note">
                               {{item.extra.wenzicixiu.item}}
                            </span>
                          </li>
                        </ul>

                    </div>

                </li>

            </ul>

        </div>

      </div>

      <div class="content-page">
        <Page  v-show="list.total > 8" :total="list.total" :page-size="8" @on-change="goto" :current="list.page"></Page>
      </div>

      <bottomBtn @prev="pagePrev" @next="pageNext"></bottomBtn>

      <Modal
        v-model="modal.state"
        title="提示"
        :mask-closable="false"
        :closable="false"
        @on-ok="asyncOK">
        <h2>
           是否确认选择该商品？
        </h2>
      </Modal>

    </div>

  </div>
</template>
<script>
  import {mapMutations, mapState} from 'vuex';
  import bottomBtn from "base/bottomBtn.vue"
  import pageLoading from "base/pageLoading"
  import {getList} from "api/getGoods"

  export default {
    props: {},
    data() {
      return {
        page: {
          loading: true,
        },
        list: {
          total: 20,
          size: 8,
          items:[],
          selectId:"",
          page:1
        },
        modal:{
          state:false
        }
      }
    },
    methods: {
      ...mapMutations({
        "setNavIndex": 'SET_NAVINDEX',
        "setGoodsId":"SET_GOODSID"
      }),
      pagePrev() {
        this.setNavIndex(0);
      },
      _getList(page = 1) {
        if(!this.type){return}
        this.page.loading = true;
        getList({id: this.type,p:page}).then((Rs) => {
          this.page.loading = false;
          this.list.items = Rs.data.allInfo;
          this.list.total = Rs.data.totalLine;
          this.list.page = page;
        }).catch((error)=>{
          this.setNavIndex(0);
        })
      },
      selectItem(id){
        this.list.selectId = id;
        this.setGoodsId(this.list.selectId);
      },
      goto(page){
        this._getList(page);
      },
      pageNext(){
        this.$el.querySelector(".active")?this.modal.state = true:this.$Notice.info({title: '错误', desc:'没有选择任何商品'});
      },
      asyncOK(){
        this.setNavIndex(2);
        this.setGoodsId(this.list.selectId)
      }
    },
    components: {
      bottomBtn,
      pageLoading
    },
    computed: {
      ...mapState([
        'type'
      ])
    },
    mounted() {

    },
    updated(){

    },
    created() {
      this._getList();
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {

      })
    },
    activated(){
      this.setNavIndex(1);
    },
    deactivated(){

    },
    beforeRouteUpdate(to, from, next) {
      next(vm => {

      })
    },
    beforeRouteLeave(to, from, next) {
      next(vm => {

      })
    },
    watch:{
       type(){
         this.list.selectId= "";
         this._getList();
       }
    }
  }
</script>

<style lang="less">
  @import "../../common/style/helpers/mixins.less";

  .goodsPage {
    color: #9e2828;

    .goods{
      &-main {
        .content-main{
          padding: 10px 0;
          .active{
            box-shadow: 0 0 40px #9e2828;
            top:-10px;
            z-index: 5;
            .item-explain{
               opacity: 1;
               right: -265px;
               transform: scale(1);
            }
          }
          &-item{
            height: 300px;
            width: 200px;
            margin-right: 80px;
            float: left;
            position: relative;
            margin-top: 20px;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 20px #ccc;
            transition: all 0.3s;
            top:0;

          }
          .item-pic{
            height: 200px;
            width: 100%;
            img{
              width: 110%;
              height: 105%;
              position: relative;
              top:-4.5%;
              left: -5%;
            }
          }
          .item-price{
            height: 36px;
            line-height: 36px;
            font-size: 18px;
            color: #e33e40;
            .omit();
          }
          .item-title{
            height: 24px;
            font-size: 12px;
            color: #000;
            letter-spacing: 1px;
            .omitMore(1);
          }
          .item-note{
            height: 20px;
            line-height: 20px;
            .omit();
          }
          .item-check{
            height: 100%;
            width: 100%;
            background: rgba(0,0,0,0.3);
            position: absolute;
            text-align: center;
            line-height: 300px;
            vertical-align: middle;
            font-size: 80px;
            top:0;
            left: 0;
            display: none;
          }
          .item-explain{
            padding: 10px;
            border: 1px solid #ccc;
            background: #fff;
            border-radius: 10px;
            width: 255px;
            position: absolute;
            right: -295px;
            top:20px;
            opacity: 0;
            transition: all 0.4s;
            letter-spacing: 2px;
            transform: scale(0.9);
            &-row{
              .omit();
            }
            &-note{
              color: #000;
            }
          }
        }
        .content-page {
          padding: 20px 0;
          text-align: center;
        }
      }
    }

    .ivu-page {
      text-align: center;
    }
  }
</style>
